<template>
    <div>
        <el-form :model="inOutItem" ref="form" label-width="120px" :rules="rules">
            <el-form-item label="名称：" prop="itemName">
                <el-input v-model="inOutItem.itemName" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="类型：" prop="type">
                <el-select v-model="inOutItem.type" placeholder="请选择类型">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="inOutItem.sort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input
                    v-model="inOutItem.remark"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请输入备注"
                />
            </el-form-item>
            <el-row :gutter="20" style="height: 30px">
                <el-col :span="24" :offset="0">
                    <el-form-item style="float: right;">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="onSubmit(form)">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import {ref,defineEmits} from 'vue'
import request from '@/api/request'
import { ElMessage } from 'element-plus';

let emits = defineEmits(['close'])
let inOutItem = ref({})
let close = ()=>{
    emits('close')
}

let form = ref()

//校验规则
let rules = {
    itemName: [
        { required: true, message: '请输入名称!', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择类型', trigger: 'change' }
    ]
}

let options = [
  {value: '收入', label: '收入'},
  {value: '支出', label: '支出'}
]

let onSubmit =(formEl)=>{
    formEl.validate(valid =>{
        if(valid) {
            request.post("/basic/in_out_item/insert", inOutItem.value,{
                body: JSON.stringify(inOutItem.value)
            }).then(resp=>{
                ElMessage.success(resp.data)
                emits('close')
            }).catch((err)=>{
                ElMessage.error(err)
            })
        }
    })
}

</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 350px;
}

</style>
